<template>
    <!-- <div class="w100 page"> -->
        <ul class="flex row tuijian pl10 pr10" v-if="tuiJianList.length != 0">
            <li class="ml5 mr5 flex col" v-for="(item,index) in tuiJianList" :key="index" @click="clickList(item)">
                <img class="" :src="item.coverPicUrl" />
                <p class="fs14 mt5 mb5 h36 lh18 ofh ml3">{{item.productName | sliceString(12)}}</p>
                <span class="price mb10 ml3"><span><span class="fs12">￥</span>{{item.salePrice}}</span></span>
            </li>
        </ul>
    <!-- </div> -->
</template>
<script>
export default {
    name:'tuijian',
    props:{
        tuiJianList:{
            type:Array,
            default:[]
        }
    },
    created(){
        // console.log(this.tuijianList)
    },
    methods:{
        clickList(sku){
            this.$router.push({
                path:'/categoryDetail',
                query:{
                    cateNo: sku.productNo
                }
            })
        }
    }
}
</script>
<style scoped lang="less">
.tuijian{
    width:100%;
    overflow-x:scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing:border-box;
    text-align:left;
    &::-webkit-scrollbar{
        display:none;
    }
    img{
        width:10rem;
        height:10rem;
        border-radius: .5rem;
    }
    .price{
        color:#fd3b2f;
    }
}
</style>
